import React from 'react'
import { useNavigate } from 'react-router'
import './index.css'
import phone1 from '../../../../static/img/Search and Particulars/phone1.png'
import phone2 from '../../../../static/img/Search and Particulars/phone2c.png'
import phone3 from '../../../../static/img/Search and Particulars/phone3.png'
import codeimg from '../../../../static/img/Search and Particulars/yzm.png'
import axios from 'axios'
export default function Phone2() {
    const natitate = useNavigate()
    function nowsubmit() {
        const phone = document.getElementsByClassName('changephone')[0].value
        axios.post('http://localhost:3001/mycenter/changePhone', { phone, id: 1 }).then((res) => {
            if (res.data.code === 1) {
                natitate('/mycenter/changephone3')
            }
        })
    }
    return (
        <div>
            <h3 className='tt'>换绑手机</h3>
            <div className="C-middle ">
                <div className="phone1">
                    <img src={phone1} alt="" />
                </div>
                <div className="phone2">
                    <img src={phone2} alt="" />
                </div>
                <div className="phone3">
                    <img src={phone3} alt="" />
                </div>
                <input type="text" className='changephone' placeholder='请输入新手机号' />
                <input type="text" className='verification-code' placeholder='验证码' />
                <div className="codeimg">
                    <img src={codeimg} alt="" />&nbsp;&nbsp;&nbsp;
                    <span>看不清换一张</span>
                </div>
                <div className="phonecode">
                    <input className='phonecodeis' type="text" placeholder='手机验证码' />
                    <div className="clickcode">获取验证码</div>
                </div>
                <div className="c-submit" onClick={nowsubmit}>提交验证</div>
            </div>

        </div>
    )
}
